<template>
  <a-modal destroyOnClose :title="`审核企业申请合并`" :okText="$t('common.confirm')" :cancelText="$t('common.cancel')" :visible="visible" :width="720" @cancel="cancle(false)" @ok="cancle(false)" class="MergeManage">
    <div class="content">
      <p>申请合并的企业：<span>{{record.oldCompanyName}}</span></p>
      <p>合并企业申请人：<span>{{record.fromUserEmail}}</span></p>
    </div>
    <p class="num">该企业现已开通 {{record.accounts.totalCount}} 个账号 <span>（仅显示前五个）</span></p>
    <a-table class="mergetable" bordered :pagination="false" :showHeader="false" :data-source="record.accounts.items" :columns="columns">
    </a-table>
    <template slot="footer">
      <div class="footer-box">
        <!-- <a-checkbox v-model="setAllPositionCOMPLETED" class="fl" v-if="taskListValue.indexOf('swapHrManagerPosition') === -1">同时批量下线TA的职位</a-checkbox> -->
        <a-button @click="cancle(false)">暂不处理</a-button>
        <a-button class="mr10 ml10 orange" @click="accountReject"><span>&nbsp;&nbsp;驳&nbsp;回&nbsp;&nbsp;</span></a-button>
        <a-button type="primary" class="mr10 ml10" @click="vendorApprove">接受合并</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>
import { mapState } from 'vuex'
import { vendorApprove, accountReject } from '@/api/employingUnit'
export default {
  name: 'MergeManage',
  props: ['visible', 'record'],
  data () {
    return {
      columns: [{
        title: '姓名',
        dataIndex: 'name'
      }, {
        title: '邮箱',
        dataIndex: 'account'
      }, {
        title: '账号创建时间',
        dataIndex: 'dateCreated'
      }]
      // data: [{
      //   name: '张三三',
      //   account: 'zhangsan@sina.com'
      // }, {
      //   name: '张三三',
      //   account: 'zhangsan@sina.com'
      // }]
    }
  },
  computed: {
    ...mapState({
    })
  },
  watch: {
    visible: {
      handler (newValue, oldValue) {
        if (newValue) {
          this.initData()
        }
      },
      immediate: true
    }
  },
  methods: {
    initData () {
    },
    cancle (flag) {
      this.$emit('close', flag)
    },
    async vendorApprove () {
      let params = {
        recordId: this.record.id
      }
      let res = await vendorApprove(params)
      if (res.code === 200) {
        this.$message.success(res.message)
        this.cancle(true)
      } else {
        this.$message.error(res.message)
      }
    },
    async accountReject () {
      let params = {
        recordId: this.record.id
      }
      let res = await accountReject(params)
      if (res.code === 200) {
        this.$message.success(res.message)
        this.cancle(true)
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.MergeManage
  .orange
    background var(--orange-800)
    color white
  .content
    background var(--light-grey)
    line-height 32px
    padding 12px
  .num
    margin 12px
  .mergetable
    margin 12px 0
</style>
<style lang="stylus">
.MergeManage
  :global(.ant-table-bordered .ant-table-body > table)
    border-left none
  :global(.ant-table-tbody > tr > td)
    border-bottom 1px solid #e8e8e8
    &:last-child
      border-right none
</style>
